<template>
  <div class="wrapper flex items-center">
    <div>机台状态：</div>
    <div  class="content flex items-center margin-r-20" v-for="(item, i) in statusList" :key="i">
      <div class="status" :style="{'background': item.color}"></div>
      <div class="name">{{item.label}}</div>
    </div>
    <template v-for="(item, index) in statusOptions">
      <div class="content flex items-center" :key="index" :class="{'margin-r-20': index !== statusOptions.length - 1}" v-if="index >= 5 && (hasWork || hasCraft || isInit)">
        <div style="padding-left: 10px" v-if="index === 5">管理状态：</div>
        <div class="status" :style="{'background': item.color}"></div>
        <div class="name" >{{item.label}}</div>
      </div>
    </template>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { setHasList } from '../../../assets/js/util'
export default {
  name: 'legend-box',
  data () {
    return {
      // statusOptions: []
    }
  },
  props: ['hasWork', 'hasCraft', 'isInit'],
  mounted () {
    // this.init()
  },
  computed: {
    ...mapGetters(['statusList']),
    statusOptions () {
      // 冲状态枚举中取出机场状态数组
      const newArr = Object.entries(this.Enums.MACHINES_STATUS)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc,
            color: entry[1].color
          }
        })
      if (this.isInit) return newArr
      return setHasList(newArr, this.hasCraft, this.hasWork)
    }
  },
  methods: {
    init () {
      // 冲状态枚举中取出机场状态数组
      const newArr = Object.entries(this.Enums.MACHINES_STATUS)
        .map(entry => {
          return {
            value: entry[1].value,
            label: entry[1].desc,
            color: entry[1].color
          }
        })
      const member = setHasList(newArr, this.hasCraft, this.hasWork)
      console.log(this.hasCraft, this.hasWork, member)
      this.statusOptions = member
    }
  }
}
</script>

<style scoped lang="stylus">
.status{
  width 10px
  height 10px
  border-radius 50%
  margin-right 5px
}
</style>
